<template>
  <view class="resume-edit-page">
  
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'ResumeEditPage',
  data() {
    return {
      resumeData: {
        name: '',
        phone: '',
        email: '',
        gender: '',
        age: '',
        city: '',
        expectedPosition: '',
        expectedCity: '',
        expectedSalary: '',
        workExperiences: [],
        educations: [],
        skills: [],
        selfEvaluation: ''
      },
      skillInput: '',
      isSaving: false,
      showSalaryModal: false,
      salaryColumns: [
        ['3K以下', '3K-5K', '5K-10K', '10K-15K', '15K-25K', '25K-50K', '50K以上', '面议']
      ]
    }
  },
  computed: {
    // 基本信息完成度
    basicInfoCompleted() {
      return this.resumeData.name && this.resumeData.phone
    },
    
    // 求职意向完成度
    intentionCompleted() {
      return this.resumeData.expectedPosition
    },
    
    // 工作经验完成度
    experienceCompleted() {
      return this.resumeData.workExperiences.length > 0
    },
    
    // 教育经历完成度
    educationCompleted() {
      return this.resumeData.educations.length > 0
    },
    
    // 技能特长完成度
    skillsCompleted() {
      return this.resumeData.skills.length > 0
    },
    
    // 自我评价完成度
    selfEvaluationCompleted() {
      return this.resumeData.selfEvaluation && this.resumeData.selfEvaluation.length >= 20
    },
    
    // 总完整度
    completeness() {
      const sections = [
        this.basicInfoCompleted,
        this.intentionCompleted,
        this.experienceCompleted,
        this.educationCompleted,
        this.skillsCompleted,
        this.selfEvaluationCompleted
      ]
      const completedCount = sections.filter(completed => completed).length
      return Math.round((completedCount / sections.length) * 100)
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadResume(options.id)
    }
  },
  methods: {
    ...mapActions('resume', ['saveResume', 'getResume']),

    // 加载简历数据
    async loadResume(resumeId) {
      try {
        const response = await this.getResume(resumeId)
        this.resumeData = { ...this.resumeData, ...response.data }
      } catch (error) {
        console.error('加载简历失败:', error)
      }
    },

    // 显示薪资选择器
    showSalaryPicker() {
      this.showSalaryModal = true
    },

    // 确认薪资选择
    confirmSalary(value) {
      this.resumeData.expectedSalary = value.value[0]
      this.showSalaryModal = false
    },

    // 添加技能
    addSkill() {
      const skill = this.skillInput.trim()
      if (skill && !this.resumeData.skills.includes(skill)) {
        this.resumeData.skills.push(skill)
        this.skillInput = ''
      }
    },

    // 移除技能
    removeSkill(index) {
      this.resumeData.skills.splice(index, 1)
    },

    // 添加工作经历
    addWorkExperience() {
      uni.showToast({
        title: '工作经历编辑功能开发中',
        icon: 'none'
      })
    },

    // 编辑工作经历
    editWorkExperience(index) {
      uni.showToast({
        title: '工作经历编辑功能开发中',
        icon: 'none'
      })
    },

    // 删除工作经历
    deleteWorkExperience(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条工作经历吗？',
        success: (res) => {
          if (res.confirm) {
            this.resumeData.workExperiences.splice(index, 1)
          }
        }
      })
    },

    // 添加教育经历
    addEducation() {
      uni.showToast({
        title: '教育经历编辑功能开发中',
        icon: 'none'
      })
    },

    // 编辑教育经历
    editEducation(index) {
      uni.showToast({
        title: '教育经历编辑功能开发中',
        icon: 'none'
      })
    },

    // 删除教育经历
    deleteEducation(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条教育经历吗？',
        success: (res) => {
          if (res.confirm) {
            this.resumeData.educations.splice(index, 1)
          }
        }
      })
    },

    // 预览简历
    previewResume() {
      uni.showToast({
        title: '简历预览功能开发中',
        icon: 'none'
      })
    },

    // 保存简历
    async saveResume() {
      // 基本验证
      if (!this.resumeData.name) {
        uni.showToast({ title: '请填写姓名', icon: 'error' })
        return
      }
      
      if (!this.resumeData.phone) {
        uni.showToast({ title: '请填写手机号', icon: 'error' })
        return
      }

      this.isSaving = true
      try {
        await this.saveResume(this.resumeData)
        uni.showToast({ title: '保存成功', icon: 'success' })
      } catch (error) {
        uni.showToast({ title: '保存失败，请重试', icon: 'error' })
      } finally {
        this.isSaving = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.resume-edit-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
  
  .progress-header {
    background-color: #fff;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .progress-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .progress-text {
        font-size: 28rpx;
        color: #333;
      }
      
      .progress-percent {
        font-size: 28rpx;
        font-weight: 600;
        color: #007AFF;
      }
    }
    
    .progress-bar {
      height: 8rpx;
      background-color: #f0f0f0;
      border-radius: 4rpx;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(135deg, #007AFF 0%, #5856d6 100%);
        border-radius: 4rpx;
        transition: width 0.3s ease;
      }
    }
  }
  
  .resume-form {
    .form-section {
      background-color: #fff;
      margin-bottom: 20rpx;
      
      .section-header {
        display: flex;
        align-items: center;
        padding: 32rpx;
        border-bottom: 1rpx solid #f8f9fa;
        
        .section-title {
          flex: 1;
          margin-left: 16rpx;
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
        
        .completion-badge {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
          background-color: #ccc;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;
          
          &.completed {
            background-color: #28a745;
          }
        }
        
        .add-btn {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
          background-color: #f0f9ff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      
      .form-group {
        padding: 32rpx;
        
        .input-item {
          margin-bottom: 32rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .label {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 16rpx;
          }
          
          .input-field {
            width: 100%;
            padding: 20rpx 24rpx;
            background-color: #f8f9fa;
            border: 1rpx solid #e9ecef;
            border-radius: 12rpx;
            font-size: 28rpx;
            color: #333;
            
            &::placeholder {
              color: #adb5bd;
            }
            
            &:focus {
              border-color: #007AFF;
              background-color: #fff;
            }
          }
          
          .radio-group {
            display: flex;
            gap: 32rpx;
            
            .radio-item {
              padding: 16rpx 32rpx;
              background-color: #f8f9fa;
              border: 1rpx solid #e9ecef;
              border-radius: 20rpx;
              
              &.active {
                background-color: #007AFF;
                border-color: #007AFF;
                
                .radio-text {
                  color: #fff;
                }
              }
              
              .radio-text {
                font-size: 28rpx;
                color: #666;
              }
            }
          }
          
          .picker-field {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 24rpx;
            background-color: #f8f9fa;
            border: 1rpx solid #e9ecef;
            border-radius: 12rpx;
            
            .picker-text {
              font-size: 28rpx;
              color: #333;
            }
          }
          
          .skill-input-area {
            display: flex;
            align-items: center;
            
            .skill-input {
              flex: 1;
              padding: 20rpx 24rpx;
              background-color: #f8f9fa;
              border: 1rpx solid #e9ecef;
              border-radius: 12rpx;
              font-size: 28rpx;
              color: #333;
              margin-right: 16rpx;
            }
            
            .add-skill-btn {
              width: 60rpx;
              height: 60rpx;
              background-color: #007AFF;
              border-radius: 12rpx;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
        
        .textarea-item {
          .textarea-field {
            width: 100%;
            min-height: 200rpx;
            padding: 20rpx 24rpx;
            background-color: #f8f9fa;
            border: 1rpx solid #e9ecef;
            border-radius: 12rpx;
            font-size: 28rpx;
            color: #333;
            line-height: 1.6;
            
            &::placeholder {
              color: #adb5bd;
            }
          }
        }
        
        .skill-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 16rpx;
          margin-top: 16rpx;
          
          .skill-tag {
            display: flex;
            align-items: center;
            padding: 12rpx 16rpx;
            background-color: #f0f9ff;
            border: 1rpx solid #e6f4ff;
            border-radius: 16rpx;
            
            .skill-text {
              font-size: 24rpx;
              color: #007AFF;
              margin-right: 8rpx;
            }
            
            .remove-skill {
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
      
      .experience-list, .education-list {
        .experience-item, .education-item {
          margin: 24rpx 32rpx;
          padding: 24rpx;
          background-color: #f8f9fa;
          border-radius: 12rpx;
          
          .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16rpx;
            
            .item-title {
              font-size: 28rpx;
              font-weight: 500;
              color: #333;
            }
            
            .item-actions {
              display: flex;
              gap: 16rpx;
              
              .edit-btn, .delete-btn {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                background-color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
          
          .item-content {
            .company-name, .school-name {
              display: block;
              font-size: 26rpx;
              font-weight: 500;
              color: #333;
              margin-bottom: 8rpx;
            }
            
            .position-name, .major-name {
              display: block;
              font-size: 24rpx;
              color: #666;
              margin-bottom: 8rpx;
            }
            
            .work-period, .education-period {
              font-size: 22rpx;
              color: #999;
            }
          }
        }
        
        .add-experience-btn, .add-education-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 60rpx 32rpx;
          
          .add-text {
            margin-top: 16rpx;
            font-size: 26rpx;
            color: #999;
          }
        }
      }
    }
  }
  
  .bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx 32rpx;
    border-top: 1rpx solid #f0f0f0;
    display: flex;
    gap: 20rpx;
    
    .preview-btn {
      flex: 1;
      height: 80rpx;
      background-color: #f8f9fa;
      border: 1rpx solid #e9ecef;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: #666;
    }
    
    .save-btn {
      flex: 2;
      height: 80rpx;
      background: linear-gradient(135deg, #007AFF 0%, #5856d6 100%);
      color: #fff;
      border-radius: 16rpx;
      font-size: 28rpx;
      border: none;
      
      &:disabled {
        background: #e9ecef;
        color: #adb5bd;
      }
    }
  }
}
</style>